<html>
	<head>
		<meta charset="UTF-8">
		<title>EOMS用户配置</title>
		<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
		<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/color.css">
		<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
		<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
	</head>
	<body>
		<a href="/?pageSize=10&pageNo=1&processedFlag=1" class="easyui-linkbutton" class="easyui-linkbutton"  plain="true" onclick="newUser()">工单</a>
		<a href="/setting" class="easyui-linkbutton" class="easyui-linkbutton"  plain="true" onclick="newUser()">系统设置</a>
		<table id="dg" title="EOMS用户配置" class="easyui-datagrid" style="width:600px;height:420px"
            toolbar="#toolbar" pagination="false"
            rownumbers="true" fitColumns="true" singleSelect="true">
			<thead>
				<tr>
					<th field="workname" width="50">用户名</th>
					<th field="email" width="50">邮箱</th>
					<th field="sheetTitle" width="80">操作</th>
			
				</tr>
				
			</thead>
			<tbody>
				{% for user in users %}
				<tr>
					<td><input type='input'  value="{{user.name}}" id="id_{{user.id}}"/></td>
					<td><input type='input'  value="{{user.email}}" id="email_{{user.id}}"/></td>
					<td>
						<a href="/userlist?id={{user.id}}&opt=update&name={{user.name}}&email={{user.email}}" class="easyui-linkbutton" iconCls="icon-edit" plain="true" id="update{{user.id}}">保存</a>
						<a href="/userlist?id={{user.id}}&opt=del" class="easyui-linkbutton" iconCls="icon-remove" plain="true" id="del{{user.id}}">删除</a>
						
					</td>
				</tr>
				<script type="text/javascript">
					$(function(){
						$('#id_{{user.id}}').change(function(){
							var name=$('#id_{{user.id}}').val().trim();
							var email=$('#email_{{user.id}}').val().trim();
							$('#update{{user.id}}').attr('href','/userlist?id={{user.id}}&opt=update&name=' + name + '&email='+ email);
						});
						$('#email_{{user.id}}').change(function(){
							var name=$('#id_{{user.id}}').val().trim();
							var email=$('#email_{{user.id}}').val().trim();
							$('#update{{user.id}}').attr('href','/userlist?id={{user.id}}&opt=update&name=' + name + '&email='+ email);
						});
					});
					
				</script>
				{% endfor %}
			</tbody>
		</table>
		<a class="easyui-linkbutton" iconCls="icon-add" plain="true" id="save" onclick="newUser()">增加用户</a>
		
		<div id="dlg" class="easyui-dialog" style="width:300;height:160px;padding:10px 10px"
            closed="true" buttons="#dlg-buttons">
		
			<div class="fitem">
				<div class="fitem">
					<label>用户名:</label>
					<input name="name" class="easyui-textbox" required="true" id="username">
				</div>
				<div class="fitem">
					<label>email:</label>
					<input name="email" class="easyui-textbox"  id="email">
				</div>
			</div>
	
		</div>
		<div id="dlg-buttons">
			<a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" style="width:90px" id="save_user">Save</a>
			<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>
		</div>
		
		<script type="text/javascript">
			var url;
			function newUser(){
				$('#username').textbox('clear')
				$('#email').textbox('clear')
				$('#dlg').dialog('open').dialog('setTitle','增加用户');
				
			}

			$('#save_user').click(function(){
				username = $('#username').val().trim()
				if(username=='')
					return;
				email = $('#email').val().trim()
				window.location='/userlist?opt=add&name=' + username + '&email=' + email;
			});

		</script>
		<style type="text/css">
			#fm{
				margin:0;
				padding:10px 30px;
			}
			.ftitle{
				font-size:14px;
				font-weight:bold;
				padding:5px 0;
				margin-bottom:10px;
				border-bottom:1px solid #ccc;
			}
			.fitem{
				margin-bottom:5px;
			}
			.fitem label{
				display:inline-block;
				width:80px;
			}
			.fitem input{
				width:160px;
			}
		</style>
	</body>
</html>